Computed Columns

IN THIS PAGE

Example 2
Videos

Description

Specify dynamically computed columns on the client-side using these properties.

Discussion

Computed Columns, or "Virtual Columns", are columns that are calculated using an expression. Calculated fields are specified in the Client-side Calculated Fields property.

The data for calculated fields to be shown in the List View can be computed on the server (for example as part of the SQL query that retrieves the data) or on the client (i.e. in the browser). Client-side Calculated Fields are computed on the client. The computed fields can reference data in the List.

For example, assume that your List View query has retrieved data for a field called 'QUANTITY' and a field called 'PRICE' (but not for a field called 'TOTAL'). You would like to display a field called 'TOTAL' in the list view that multiplied 'PRICE' by 'QUANTITY'. Here is how you could perform this calculation in the browser (i.e. client-side):

data.TOTAL = $u.s.toNum(data.PRICE) * $u.s.toNum(data.QUANTITY);
data.TAX = $u.s.toNum(data.TOTAL) * .05;

'TOTAL' and 'TAX' will now be new fields that you can include in the List View template, just like any other field in the List View.

Note: The $u.s.toNum() function is used to convert the field from a string to a number so that a numeric calculation can be performed. $u.s.toNum() is a function in the Alpha Anywhere Javascript Library. You can also use $u.s.toBool() to convert to a true/false value.

You can compute as many client-side calculated fields as you want.
The definition of the calculated field is written in Javascript.
Each field definition starts with data.CALCULATED_FIELD_NAME followed by = then the Javascript code that defines the field. The code is terminated with a semi-colon.
The field you are defining and all references to existing fields must use the data. prefix (lower case)
Field names are case-sensitive.
Each field definition must be terminated with a semi-colon.
You can reference index in the Javascript definition for each field. index is the row number in the list that is currently being rendered. index is 0 based (i.e. first row in List View has a value of 0).
The Javascript that defines the expression for a particular calculated field can be quite complex. For example, in the example below an anonymous function is defined and then called to compute the value of the RANK field.

data.RANK = function(data,index) { 
    if(data.RANK > this.summary.RANKAVERAGE) data.RANK = '<&lt;>span style="color: green;">'+data.RANK+'<&lt;>/span>';
    else data.RANK = '<&lt;>span style="color: green;">'+data.RANK+'<&lt;>/span>';
    return data.RANK; 
    }(data,index);

Notice that in the above example, the anonymous function definition is immediately followed by a call to the function, passing in data and index.

In the above example this.summary.RANKAVERAGE is a value that was computed in the onBeforeListDraw event. The calculated field displays the 'RANK' field in green or red, depending on whether the value for the current row is above or below the average rank.

Example 2

This example shows how client-side calculated fields can be used to add dynamic images to the List (i.e. the image in each row is based on data in the row)

data.DYNAMICIMAGE = function(data,index) { 
    if(data.State == 'MA') {
        return A5.u.icon.html('cssIcon=fa fa-align-center fa-2x {color: #f6b5b5;}'); //use css icon
    } 
    else if(data.State == 'CA') {
        return A5.u.icon.html('cssIcon=fa fa-align-center fa-2x {color: blue;}');
    }
    else if(data.State == 'NY') { 
        return A5.u.icon.html('images/$$application.chrome.png.a5image'); //use built-in image
    }
    else return 'Not Defined';

}(data,index);

Videos

To learn more about Computed Columns, check out the videos below.

List Control - Computed Columns

The List control allows you to define computed columns. A computed column displays a value that is computed from other data in the current row. Computed columns can be calculated server- side (in which case Xbasic functions can be used in the calculation), or they can be computed client-side (in which case Javascript functions can be used in the calculation).

To define a server-side computed column, you would actually define a 'Custom Control' as shown in this video.

In this video we show how a client-side computed column can be added to the List.

Watch Video

Dynamic Images - Client-Side

When you add a 'Dynamic Image' column to a List control to display an image in the List that is based on other data in each List row you can specify if the computation of what image to show should be server-side, or client-side. If server-side, your expressions that define the conditional tests are specified in Xbasic. If client-side, your conditional expressions are expressed in Javascript.

The benefit of client-side dynamic images is that the image will be automatically recomputed when the data in a List row is updated.

In this video we show how client-side Dynamic Images can be defined and then we show another technique for creating client-side Dynamic Images using the List's Computed Columns feature. This second technique has the advantage of offering more flexibility.

Watch Video

Download Component